<template>
  <ui-page class="container">
    <div class="tables">
      <div
          v-for="item in tabs"
          :key="item.value"
          :class="['tab', item.value === tab ? 'is-active' : '']"
          @click="tab = item.value"
      >
        {{ item.label }}
      </div>
    </div>
    <transition name="fade-down" mode="out-in">
      <component ref="locus" :is="tabComponent" class="tab-panel"/>
    </transition>
  </ui-page>
</template>

<script>
import Vue from 'vue';
import Line from './lineChart'
import Bar from './barChart'
import Pie from './pieChart'

export default {
  name: "ComponentsChart",
  data() {
    return {
      tabs: [
        {label: '折线图', value: 'line'},
        {label: '柱状图', value: 'bar'},
        {label: '饼状图', value: 'pie'},
      ],
      tab:'line',
    }
  },

  computed: {
    tabComponent({tab}) {
      if (tab === 'line') {
        return Line;
      } else if (tab === 'bar') {
        return Bar;
      } else if (tab === 'pie') {
        return Pie;
      }
      return null;
    },
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
  .container {
    margin: 0;

    .tables{
      display: flex;
      justify-content: center;

      .tab{
        margin-left: 10px;
        cursor: pointer;
      }
      .is-active{
        color: #1ABDFB;
      }
    }
  }
</style>
